<main>
	<section class="options-row">
		<div class="left" id="sort">
          <span>
            ${(curSort.name)! 'Hot'}
          </span>
			<i class="iconfont icondown1"></i>
		</div>
		<div class="right" id="country">
          <span>
            ${(curType.name)!'All'}
          </span>
			<i class="iconfont icondown1"></i>
		</div>
		<div class="mask" id="mask">
			<div class="mask-con" id="maskContent">
				<div class="options-row">
					<div class="left">
                <span>
                  ${(curSort.name)!'Hot'}
                </span>
						<i class="iconfont icondown1"></i>
					</div>
					<div class="right">
						<span>${(curType.name)!'All'}</span>
						<i class="iconfont icondown1"></i>
					</div>
				</div>
				<nav class="mask-left-list" id="countryList">
                    <#list typeList as type>
						<div class="mask-left-item <#if type.active == true>is-active</#if>">
							<a href="${contextPath}/video/${curSortKey}/${type.key}">${type.name}</a>
						</div>
                    </#list>
				</nav>
				<nav class="mask-left-list" id="sortList">
                    <#list sortList as sort>
						<div class="mask-left-item <#if sort.active><#assign activeSort=sort.key/>is-active</#if>">
                            <#if curType??>
								<a href="${contextPath}/video/${sort.key}/${curType.key}">${(sort.name == 'Spread Index')? string('Hotness', sort.name)}</a>
                            <#else>
								<a href="${contextPath}/video/${sort.key}/all">${(sort.name == 'Spread Index')? string('Hotness', sort.name)}</a>
                            </#if>
						</div>
                    </#list>
				</nav>
			</div>
		</div>
	</section>
	<section class="scroll-list">
        <#list dataList as data>
        <#if login == false>
		<a href="javascript:;" onclick="toLogin()">
            <#else>
			<a href="${data.shareUrl}">
                </#if>
				<div class="list-item">
					<div class="item-info">
						<div class="item-avatar">
							<img class="avatar" src="${data.cover}">
							<div class="bottom">${data.duration}</div>
						</div>
						<div class="item-title">
							<div class="top">
								<div class="nickname">${data.title}</div>
							</div>
							<div class="bottom">
                                ${data.uniqueId} | ${data.createTime}
							</div>
						</div>
                        <#if data_index < 3>
							<div class="item-rank rank-${data_index+1}">
								<div class="rank-num">${data_index+1}</div>
							</div>
                        <#else>
							<div class="item-rank rank-other">
                                ${data_index+1}
							</div>
                        </#if>
					</div>
					<div class="data-list">
						<div class="data-item">
							<div class="label">Views</div>
							<div class="num">${data.views}</div>
						</div>
						<div class="data-item">
							<div class="label">Likes</div>
							<div class="num">${data.likes}</div>
						</div>
						<div class="data-item">
							<div class="label">Reviews</div>
							<div class="num">${data.reviews}</div>
						</div>
						<div class="data-item">
							<div class="label">Share</div>
							<div class="num">${data.share}</div>
						</div>
					</div>
				</div>
			</a>
            </#list>
	</section>
	<section class="more">
        <#if login != false>
			Continue on PC for more
        <#else>
			<a> View More </a>
        </#if>
	</section>
</main>
<script>
    let el_sort = document.querySelectorAll('.options-row>.left')
    let el_country = document.querySelectorAll('.options-row>.right')

    let mask = document.getElementById('mask')
    let sortList = document.getElementById('sortList')
    let countryList = document.getElementById('countryList')
    let maskContent = document.getElementById('maskContent')
    maskContent.addEventListener('touchstart', (e) => {
        e.stopPropagation()
    })
    el_sort.forEach(item => {
        item.addEventListener('touchstart', () => {
            mask.show()
            document.getElementsByTagName('body')[0].style.overflow = 'hidden'
            sortList.show('flex')
            countryList.hide()
        })
    })
    el_country.forEach(item => {
        item.addEventListener('touchstart', () => {
            mask.show()
            document.getElementsByTagName('body')[0].style.overflow = 'hidden'
            sortList.hide()
            countryList.show('flex')
        })
    })
    mask.addEventListener('touchstart', (e) => {
        mask.hide()
        document.getElementsByTagName('body')[0].style.overflowX = 'hidden'
        document.getElementsByTagName('body')[0].style.overflowY = 'auto'
        e.preventDefault()
    })
    <#if login == false>
    document.querySelector('.more a').addEventListener('touchstart', () => {
        toLogin()
    })
    </#if>
</script>